<template>
  <div class="box2">
    <div class="title">
      <p>价格排行榜</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <!-- 图形图标的容器 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps,watch } from "vue";
//引入echarts
import * as echarts from "echarts";
const props = defineProps({
  carprice: Object,
});

let charts = ref();
let setOption = (mychart: any, Data: any) => {
  let dataAxis = Data[0];
  let data = Data[1];
  let yMax = 150;
  let dataShadow = [];
  for (let i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
  }
  //设置配置项
  var option = {
    title: {
      text: "型号价格排行榜(单位：万)",
      left: "center",
      top: 0,
      textStyle: {
        //标题颜色
        color: "#fff",
      },
    },
    xAxis: {
      data: dataAxis,
      axisLabel: {
        inside: false,
        interval: 0,
        color: "#fff",
        formatter: function (value) {
          if (value.length > 3) {
            // 如果标签长度超过6个字符
            return value.substring(0, 3) + "..."; // 截断并添加省略号
          } else {
            return value;
          }
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      z: 10,
    },
    yAxis: {
      max: 150,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#fff",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
      },
    },
    tooltip: {
      trigger: "axis", // 设置触发类型为坐标轴
      formatter: function (params: any) {
        // 在值后面添加"万"字
        var value = params[0].value;
        var formattedValue = value + "万";
        return params[0].name + ": " + formattedValue;
      },
    },
    dataZoom: [
      // 滚动条
      {
        start: 0, //默认为0
        end: 100 - 1500 / 31, //默认为100
        type: "slider",
        maxValueSpan: 10, //窗口的大小，显示数据的条数的
        show: true,
        top: 20,
        xAxisIndex: [0],
        handleSize: 0, //滑动条的 左右2个滑动条的大小
        height: "5%", //组件高度
        borderColor: "rgba(43,48,67,.8)",
        fillerColor: "#33384b",
        backgroundColor: "rgba(43,48,67,.8)", //两边未选中的滑动条区域的颜色
        showDataShadow: false, //是否显示数据阴影 默认auto
        showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
        realtime: true, //是否实时更新
        filterMode: "filter",
      },
      // 拖动内容
      {
        type: "inside",
        show: true,
        xAxisIndex: [0, 1],
        start: 1, //默认为1
        end: 100 - 1500 / 31, //默认为100
      },
      // 没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
      {
        type: "inside",
        xAxisIndex: 0,
        zoomOnMouseWheel: false, // 滚轮是否触发缩放
        moveOnMouseMove: true, // 鼠标滚轮触发滚动
        moveOnMouseWheel: true,
      },
    ],
    series: [
      {
        type: "bar",
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#00EFFC" },
            { offset: 0.5, color: "#009FD0" },
            { offset: 1, color: "#0055A9" },
          ]),
          // 添加圆角
          barBorderRadius: [3, 3, 0, 0], // 上左，上右，下右，下左
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#2378f7" },
              { offset: 0.7, color: "#2378f7" },
              { offset: 1, color: "#83bff6" },
            ]),
          },
        },
        data: data,
      },
    ],
  };
  const zoomSize = 6;
  mychart.on("click", function (params) {
    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
    mychart.dispatchAction({
      type: "dataZoom",
      startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
      endValue:
        dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)],
    });
  });
  mychart.clear();
  mychart.setOption(option);
  mychart.resize({
    height: 320,
    animation: {
      duration: 1000,
    },
  });
};
//组件挂载完毕初始化图形图标
onMounted(() => {
  let mychart = echarts.init(charts.value);
  setOption(mychart, props.carprice);
});
watch(
  () => props.carprice,
  (newValue) => {
    // 在数据变化时重新设置图表的数据和选项
    let mychart = echarts.init(charts.value);
    setOption(mychart, newValue);
  }
);
</script>

<style scoped lang="scss">
.box2 {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  // background-color: #fff;

  .title {
    margin-left: 20px;
    text-align: left;
    // color: #000;
    font-weight: bold;

    p {
      margin: 5px;
      color: white;
      font-size: 20px;
    }
  }

  .charts {
    height: 250px;
  }
}
</style>